<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改用户</title>
    <th:block th:insert="~{/fixed/header::head}"></th:block>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<script>
    $(function (){
        //获取页面初始数据
        let initInputLoginName = $("#inputLoginName").val();
        let initInputPassword = $("#inputPassword").val();
        let initInputUserName = $("#inputUserName").val();

        //修改按钮点击响应事件
        $("#updata").click(function (){
            //获取页面数据，去除空格
            let uid = $("#uid").text();
            let inputLoginName = $.trim($("#inputLoginName").val());
            let inputPassword = $.trim($("#inputPassword").val());
            let inputUserName = $.trim($("#inputUserName").val());
            //判断数据是否修改
            if (inputLoginName != initInputLoginName || inputPassword != initInputPassword ||
                inputUserName != initInputUserName || inputGender != initInputGender){
                //判断页面数据是否为空
                if (inputLoginName != "" && inputPassword != "" && inputUserName != ""){
                    //封装数据
                    let formData = new FormData;
                    formData.append("uid",uid);
                    formData.append("userLoginName",inputLoginName);
                    formData.append("userPasswor",inputPassword);
                    formData.append("userName",inputUserName);
                    //向后端发送数据
                    $.ajax({
                        url:"/admin/user/updata",
                        method:"POST",
                        data:formData,
                        processData: false,   // jQuery不要去处理发送的数据
                        contentType: false,   // jQuery不要去设置Content-Type请求头
                        success:function (data){
                            if (data){
                                location.href = "/admin/user";
                            }else {
                                $("#modalText").text("有重复登录名！");
                                $("#myModal").modal('show');
                            }
                        }
                    })
                }else {
                    $("#modalText").text("登录名、密码、用户名不能为空！");
                    $("#myModal").modal('show');
                }
            }else {
                $("#modalText").text("数据未修改！");
                $("#myModal").modal('show');
            }
        })

        //重置按钮点击响应事件
        $("#reset").click(function (){
            //将页面文本框内容清空
            $("#inputLoginName").val(initInputLoginName);
            $("#inputPassword").val(initInputPassword);
            $("#inputUserName").val(initInputUserName);
        })
    })
</script>

<body>
<!--头部导航条-->
<th:block th:insert="~{/fixed/headerBar::headBar}"></th:block>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <th:block th:insert="~{/fixed/siedBar::siedBar}"></th:block>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <form>
                <div>
                    <label style="font-size: 20px">用户编号：</label>
                    <label style="font-size: 20px" id="uid" th:text="${user.getUid()}"></label>
                </div>
                <div class="form-group">
                    <label for="inputLoginName">登录名</label>
                    <input type="text" class="form-control" id="inputLoginName" th:value="${user.getUserLoginName()}" placeholder="请输入登录名"
                           maxlength="16" onkeyup="value=value.replace(/[\W]/g,'')">
                </div>
                <div class="form-group">
                    <label for="inputPassword">密码</label>
                    <input type="password" class="form-control" id="inputPassword" th:value="${user.getUserPassword()}" placeholder="请输入密码"
                           maxlength="18" onkeyup="value=value.replace(/[\W]/g,'')">
                </div>
                <div class="form-group">
                    <label for="inputUserName">用户名</label>
                    <input type="text" class="form-control" id="inputUserName" th:value="${user.getUserName()}" placeholder="请输入用户名"
                           maxlength="10" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
                </div>

                <button id="updata" type="button" class="btn btn-primary">修改</button>
                <button id="reset" type="button" class="btn btn-primary">重置</button>
            </form>
        </main>
    </div>
</div>
<!--引入模态框-->
<th:block th:insert="~{/fixed/modal::modal}"></th:block>
</body>
</html>